<template>
  <div>
    <el-button class="jump-button" type="primary" @click="dialogFormVisible = true">查看</el-button>
<!-- 弹窗开始-->
    <el-dialog :visible.sync="dialogFormVisible" width="1248px" :close-on-click-modal='false'>
<!--     header开始 -->
      <p class="payment-history-text">还款记录</p>

<!--      body-->
      <div v-for="paymentHistory in paymentHistorys" :key="paymentHistory.userId">
        <p class="recordTime">{{paymentHistory.time}}</p>
        <el-row>
          <el-col :span="6"><span>账号ID: {{paymentHistory.userId}}</span></el-col>
          <el-col :span="6"><span>还款金额: {{paymentHistory.repaymentAmount}}</span></el-col>
          <el-col :span="6"><span>剩余还款金额: {{paymentHistory.remainingRepaymentAmount}}</span></el-col>
          <el-col :span="6"><span>还款账号: {{paymentHistory.repaymentAccountNo}}</span></el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      dialogFormVisible: false,
      formLabelWidth: '120px',
      paymentHistorys:[
        {
          time:'2022年10月9日',
          userId:'123456',
          repaymentAmount:'1223453.00',
          remainingRepaymentAmount:'20450.00',
          repaymentAccountNo:'11132'
        },
        {
          time:'2022年10月10日',
          userId:'222222',
          repaymentAmount:'165348.00',
          remainingRepaymentAmount:'2078600.00',
          repaymentAccountNo:'11122'
        },
        {
          time:'2022年10月11日',
          userId:'333333',
          repaymentAmount:'1765786.00',
          remainingRepaymentAmount:'2076.00',
          repaymentAccountNo:'111175'
        }
      ],
    }
  },
}
</script>

<style src="@/views/home/application-information/payment-history/payment-history.css" scoped>

</style>
